<template>
    <div>
      <div class="mine-wallet" v-if="VERSION == 0">
        <div class="mine-wallet-saveCardOne" @click="toSaveCard">
          <div class="mine-wallet-amount">
            <text class="iconfont .icon-huiyuanqia"></text>
            <text>{{balance}}</text>
          </div>
          <div class="mine-wallet-text">会员卡</div>
        </div>
        <div class="mine-wallet-saveCard" @click="toPione">
          <div class="mine-wallet-amount">
            <text class="iconfont .icon-jinbi"></text>
            <text>{{point/100}}</text>
          </div>
          <div class="mine-wallet-text">红包</div>

        </div>
        <div class="mine-wallet-saveCardOne" @click="toShopCard">
          <div class="mine-wallet-amount">
            <text class="iconfont icon-qiaquan"></text>
            <text>{{benefits}}</text>
          </div>
          <div class="mine-wallet-text">福利卡</div>

        </div>
      </div>
      <div class="mine-wallet" v-if="VERSION ==1">
        <div class="mine-wallet-saveCard" @click="toPione">
          <div class="mine-wallet-amount">
            <text class="iconfont .icon-jinbi"></text>
            <text>{{point/100}}</text>
          </div>
          <div class="mine-wallet-text">红包</div>

        </div>
        <div class="mine-wallet-saveCard" @click="toShopCard">
          <div class="mine-wallet-amount">
            <text class="iconfont icon-qiaquan"></text>
            <text>{{waterPrice}}</text>
          </div>
          <div class="mine-wallet-text">空桶押金</div>
        </div>
        <div class="mine-wallet-saveCard" @click="toIntegral">
          <div class="mine-wallet-amount">
            <text class="iconfont icon-qiaquan"></text>
            {{matchPoint}}
          </div>
          <div class="mine-wallet-text">积分</div>

        </div>
      </div>
      <div class="mine-wallet" v-if="VERSION ==2">

        <div class="mine-wallet-saveCard" @click="toPione">
          <div class="mine-wallet-amount">
            <text class="iconfont .icon-jinbi"></text>
            <text>{{point/100}}</text>
          </div>
          <div class="mine-wallet-text">红包</div>
        </div>
        <div class="mine-wallet-saveCard" @click="toSaveCard">
          <div class="mine-wallet-amount">
            <text class="iconfont .icon-huiyuanqia"></text>
            <text>{{balance}}</text>
          </div>
          <div class="mine-wallet-text">会员卡</div>
        </div>
        <div class="mine-wallet-saveCard" @click="toIntegral">
          <div class="mine-wallet-amount">
            <text class="iconfont icon-qiaquan"></text>
            <text>{{matchPoint}}</text>
          </div>
          <div class="mine-wallet-text">积分</div>
        </div>
      </div>
      <div class="mine-wallet" v-if="VERSION ==3">
        <div class="mine-wallet-saveCard" @click="toPione">
          <div class="mine-wallet-amount">
            <text class="iconfont .icon-jinbi"></text>
            <text>{{point}}</text>
          </div>
          <div class="mine-wallet-text">红包</div>
        </div>
        <div class="mine-wallet-saveCard" @click="toVouchers">
          <div class="mine-wallet-amount">
            <text class="iconfont .icon-huiyuanqia"></text>
            <text>{{couponCode}}</text>
          </div>
          <div class="mine-wallet-text">提货券</div>

        </div>
        <div class="mine-wallet-saveCard" @click="toIntegral">
          <div class="mine-wallet-amount">
            <text class="iconfont icon-qiaquan"></text>
            <text> {{matchPoint}}</text>
          </div>
          <div class="mine-wallet-text">积分</div>

        </div>
      </div>



<!--        <div class="mine-wallet" v-if="VERSION == 4">-->
<!--          <div class="mine-wallet-saveCard" @click="toCard">-->
<!--            <div class="mine-wallet-amount">-->
<!--              <div>-->
<!--                <text class="iconfont icon-qiaquan"></text>-->
<!--              </div>-->
<!--              <image class="mine-wallet-amount_img" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/integral.png"></image>-->

<!--              <text class="mine-wallet-amount_title">{{cardBalance}}</text>-->
<!--            </div>-->
<!--            <text class="mine-wallet-text">卡余额</text>-->
<!--          </div>-->
<!--          <div class="mine-wallet-saveCard" @click="toPione">-->
<!--            <div class="mine-wallet-amount">-->
<!--              <div>-->
<!--                <text class="iconfont .icon-jinbi"></text>-->
<!--              </div>-->
<!--              <image class="mine-wallet-amount_img" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/wallet.png"></image>-->
<!--              <text class="mine-wallet-amount_title">{{point/100}}</text>-->
<!--            </div>-->
<!--            <text class="mine-wallet-text">红包</text>-->
<!--          </div>-->
<!--          <div class="mine-wallet-saveCard" @click="toGroupOrder">-->
<!--            <div class="mine-wallet-amount">-->
<!--              <div>-->
<!--              </div>-->
<!--              <image class="mine-wallet-amount_img" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/warehouse.png"></image>-->

<!--              <text class="mine-wallet-amount_title">{{groupBuy}}</text>-->
<!--            </div>-->
<!--            <text class="mine-wallet-text">兑换券</text>-->
<!--          </div>-->
<!--          <div class="mine-wallet-saveCard" @click="toWarehouse">-->
<!--            <div class="mine-wallet-amount">-->
<!--              &lt;!&ndash; <text class="iconfont .icon-jinbi"></text> {{warehouse}} &ndash;&gt;-->
<!--              <image class="mine-wallet-amount_img" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/warehouse.png"></image>-->
<!--              <text class="mine-wallet-amount_title">{{warehouse}}</text>-->
<!--            </div>-->
<!--            <text class="mine-wallet-text">库存</text>-->
<!--          </div>-->
<!--          <div class="mine-wallet-saveCard mine-wallet-saveCard-change"  @click="toGroupCoupon">-->
<!--            <div class="mine-wallet-amount">-->
<!--              <image class="mine-wallet-amount_img"  src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/coup_app.png"></image>-->
<!--              <text class="mine-wallet-amount_title" >0.00</text>-->
<!--              &lt;!&ndash;              {{groupBuy}}&ndash;&gt;-->
<!--            </div>-->
<!--            <text class="mine-wallet-text">团购券</text>-->
<!--          </div>-->
<!--        </div>-->



      <div class="mine-order bs">
        <div class="mine-order-title">
          <text class="mine-order-title-text">我的钱包</text>
        </div>
        <div class="mine-order-info" style="padding-left: 10px;padding-right: 10px;">

          <div class="mine-order-unpaid" @click="toCard" data-index="unpaid">
            <div class="mine-wallet-amount">
              <div>
                <text class="iconfont icon-qiaquan"></text>
              </div>
              <text class="mine-wallet-amount_title">{{cardBalance}}</text>
            </div>
            <text class="mine-wallet-text">京元宝</text>
          </div>

          <div class="mine-order-unpaid"  @click="toPione" data-index="unpaid">
            <div class="mine-wallet-amount">
              <div>
                <text class="iconfont .icon-jinbi"></text>
              </div>
<!--              <image class="mine-wallet-amount_img" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/wallet.png"></image>-->
              <text class="mine-wallet-amount_title">{{point/100}}</text>
            </div>
            <text class="mine-wallet-text">红包</text>
          </div>
<!--          <div class="mine-order-unpaid" @click="toWelfareVoucher" data-index="unpaid" v-if="welfareShow">-->
<!--            <div class="mine-wallet-amount">-->
<!--              &lt;!&ndash;              <image class="mine-wallet-amount_img"  src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/coup_app.png"></image>&ndash;&gt;-->
<!--              <text class="mine-wallet-amount_title" >{{welfare}}张</text>-->
<!--            </div>-->
<!--            <text class="mine-wallet-text">福利券</text>-->
<!--          </div>-->
          <div class="mine-order-unpaid"  @click="toBasicCoupon" data-index="unpaid" v-if="welfareShow">
            <div class="mine-wallet-amount">
              <!--              <image class="mine-wallet-amount_img"  src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/coup_app.png"></image>-->
              <text class="mine-wallet-amount_title" >{{welfare3}}张</text>
            </div>
            <text class="mine-wallet-text">基础券</text>
          </div>
          <div class="mine-order-unpaid"  @click="toPublicCoupon" data-index="unpaid" v-if="welfareShow">
            <div class="mine-wallet-amount">
              <text class="mine-wallet-amount_title" >{{welfare4}}张</text>
            </div>
            <text class="mine-wallet-text">公共券</text>
          </div>
          <div class="mine-order-unpaid"  @click="toPremiumCoupon" data-index="unpaid" v-if="welfareShow">
            <div class="mine-wallet-amount">
              <text class="mine-wallet-amount_title" >{{welfare5}}张</text>
            </div>
            <text class="mine-wallet-text">高级券</text>
          </div>
          <div  class="mine-order-unpaid"  @click="toElite" data-index="unpaid" v-if="welfareShow && eliteCouponsShow">
            <div class="mine-wallet-amount">
              <text class="mine-wallet-amount_title" >{{welfare6}}张</text>
            </div>
            <text class="mine-wallet-text">精英券</text>
          </div>
          <div class="mine-order-unpaid" @click="toGroupOrder" data-index="unpaid">
            <div class="mine-wallet-amount">
              <div>
              </div>
              <text class="mine-wallet-amount_title">{{groupBuy}}</text>
            </div>
            <text class="mine-wallet-text">兑换券</text>
          </div>

        </div>
      </div>

    </div>
</template>
<script>
import {
  summary
} from '@/api/card'
import {
  list
} from '@/api/virtualStock'
import {
  getInfo,
} from '@/api/member'
 export default {
   data(){
     return{
       groupBuy:'0',
       balance: '0.00', //库存余额
       cardBalance: '0.00', //卡余额
       benefits: '0.00', //福利金
       point: 0,
       virtualStock: 0,
       couponCode: 0,
       matchPoint: 0,
       waterPrice:0,
       warehouse:'0',
       welfare3:'0',
       welfare4: '0',
       welfare5: '0',
       welfare6: '0'


     }
   },
   mounted(){
     console.log('版本号')
     console.log()
     this.getSummary()
     this.getInfo()
   },
     pageResume: function (data) {
         var _this = this;
         if (_this.getGlobalData().token != null) {
             this.getSummary()
             this.getInfo()
         }
     },
     methods:{
     getSummary() {
       var _this = this
       console.log("请求用户的账户卡和福利金的余额数据--")
       summary().then(
           res => {
             console.log("接收用户信息--" + JSON.stringify(res))
             if (res.type == 'success') {
               if (res.hasOwnProperty("data")) {
                 if (res.data.hasOwnProperty("benefits")) {
                   _this.benefits = res.data.benefits.toFixed(2)
                 }
                 if (res.data.hasOwnProperty("balance")) {
                   _this.babalance = res.data.balance.toFixed(2)
                 }
               }
             }
           }
       ).catch(error => {
         console.log(error)
       })
     },
     //获取用户信息
     getInfo() {
       var _this = this
       getInfo().then(
           res => {
             if (res.type == 'success') {
               _this.point = res.data.point
               _this.virtualStock = res.data.virtualStock
               _this.couponCode = res.data.couponCode
               _this.matchPoint = res.data.matchPoint
               _this.warehouse = res.data.balance
               if(res.data.welfare3 != null){
                 _this.welfare3 = parseInt(res.data.welfare3)
               }
               if(res.data.welfare4 != null){
                 _this.welfare4 = parseInt(res.data.welfare4)
               }
               if(res.data.welfare5 != null){
                 _this.welfare5 = parseInt(res.data.welfare5)
               }
               if(res.data.welfare6 != null){
                 _this.welfare6= parseInt(res.data.welfare6)
               }
               _this.groupBuy = parseInt(res.data.groupBuy)
               _this.cardBalance = res.data.cardBalance
             }
           }
       ).catch(error => {
         console.log(error)
       })
     },
     toSaveCard: function (e) {
       this.checkLogin(() => {
         eeui.openPage({
               // url: 'root://pages/member/saveCard/index',
               url: 'root://pages/member/saveCard/saveCard',
               statusBarType: 'immersion',
               statusBarStyle: false
             }, (result) => {}
         );
       })
     },
     toPione: function (e) {
       this.checkLogin(() => {
         eeui.openPage({
               url: 'root://pages/member/distribution/index',
               statusBarType: 'immersion',
               statusBarStyle: false
             }, (result) => {}
         );
       })
     },
     // 跳转到库存
     toWarehouse: function (e) {
       this.checkLogin(() => {
         eeui.openPage({
               url: 'root://pages/member/warehouse/warehouse',
               statusBarType: 'immersion',
               statusBarStyle: false
             }, (result) => {}
         );
       })
     },
     //跳转到福利金的页面
     toShopCard: function (e) {
       if (this.VERSION === 0 || this.VERSION === 2) {
         this.checkLogin(() => {
           eeui.openPage({
                 url: 'root://pages/member/shopCard/shopCard',
                 statusBarType: 'immersion',
                 statusBarStyle: false
               }, (result) => {}
           );
         })
       } else if (this.VERSION === 1) {
         this.checkLogin(() => {
           eeui.openPage({
                 url: 'root://pages/member/emptyBarrel/emptyBarrel',
                 statusBarType: 'immersion',
                 statusBarStyle: false
               }, (result) => {}
           );
         })
       }
     },
       toGroupOrder() {
           this.checkLogin(() => {
               eeui.openPage({
                       url: 'root://pages/member/card/groupBuyIndex.js',
                       statusBarType: 'immersion',
                       statusBarStyle: false
                   }, (result) => {}
               );
           })
       },
       toWelfareVoucher(){
         this.checkLogin(() => {
           eeui.openPage({
                 url: 'root://pages/member/WelfareVoucher/welfareIndex.js',
                 statusBarType: 'immersion',
                 statusBarStyle: false
               }, (result) => {}
           );
         })
       },
       toBasicCoupon(){
         this.checkLogin(() => {
           eeui.openPage({
                 url: 'root://pages/member/coupon/basicCoupon.js',
                 statusBarType: 'immersion',
                 statusBarStyle: false
               }, (result) => {}
           );
         })
       },
       toPublicCoupon(){
         this.checkLogin(() => {
           eeui.openPage({
                 url: 'root://pages/member/coupon/publicCoupon.js',
                 statusBarType: 'immersion',
                 statusBarStyle: false
               }, (result) => {}
           );
         })
       },
       toPremiumCoupon(){
         this.checkLogin(() => {
           eeui.openPage({
                 url: 'root://pages/member/coupon/premiumCoupon.js',
                 statusBarType: 'immersion',
                 statusBarStyle: false
               }, (result) => {}
           );
         })
       },
       toElite(){
         this.checkLogin(() => {
           eeui.openPage({
                 url: 'root://pages/member/coupon/eliteCoupon.js',
                 statusBarType: 'immersion',
                 statusBarStyle: false
               }, (result) => {}
           );
         })
       },




       toCard() {
           this.checkLogin(() => {
               eeui.openPage({
                       url: 'root://pages/member/card/cardIndex.js',
                       statusBarType: 'immersion',
                       statusBarStyle: false
                   }, (result) => {}
               );
           })
       },
       toVouchers() {
         this.checkLogin(() => {
             eeui.openPage({
                     url: 'root://pages/member/couponCodeGift/index?currentTab=0',
                     statusBarType: 'immersion',
                     statusBarStyle: false
                 }, (result) => {}
             );
         })
       },
       toIntegral() {
         this.checkLogin(() => {
           eeui.openPage({
                 url: 'root://pages/member/integral/integral.js',
                 statusBarType: 'immersion',
                 statusBarStyle: false
               }, (result) => {}
           );
         })
       },

     toVoucher() {
       this.checkLogin(() => {
         eeui.openPage({
           url: 'root://pages/member/voucher/voucher.js',
           statusBarType: 'immersion',
               statusBarStyle: false
             }, (result) => {}
         );
       })
     },
     //检测用户的登陆状态
     checkLogin(callback) {
       var _this = this
       if (_this.getGlobalData().token == null) {
         eeui.openPage({
               url: 'root://pages/login/msgLogin.js',
               statusBarType: 'immersion',
               statusBarStyle: false
             }, (result) => {}
         );
       } else {
         if (callback) {
           callback()
         }
       }
     },
   }
 }
</script>

<style scoped>
@import "src/style/wx.css";
@import "src/style/common.css";

.mine-wallet {
  margin-top: 30px;
  margin-left: 30px;
  height: 160px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 690px;
}
.mine-wallet-change{
  margin-top: 0px;
  align-items: flex-start;
}

.mine-wallet-text {
  padding-top: 10px;
  /*font-size: 22px;*/
  font-size: 28px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.5;
}


.mine-wallet-amount_title{
  font-size: 32px;
  margin-right: 4px;
  text-align: center;
  /*background-color: yellow;*/
  /*width: 150px;*/
  text-overflow: ellipsis;
  lines: 1;
}

.mine-wallet-saveCardOne {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex:1;
  overflow: hidden;
}

.mine-wallet-saveCard {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}


.mine-wallet-shopCard {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 50%;
  border-left-color: rgba(231, 233, 237, 1);
  border-left-style: solid;
  border-left-width: 3px;
}

.iconfontCss{
  font-size: 30px;
  color: black;
}
.mine-wallet-amount {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mine-wallet-amount_img{
  margin-right: 4px;
  /* padding-bottom: 6px; */
  width: 32px;
  height: 32px;
}
















.mine-order {
  margin-top: 40px;
  margin-left: 30px;
  margin-right: 30px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
}

.mine-order-title {
  font-size: 30px;
  position: relative;
  height: 80px;
  line-height: 80px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(231, 233, 237, 1);
  padding-left: 40px;
  padding-right: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.mine-order-title-text {
  font-size: 30px;
}

.mine-order-title-more {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mine-order-title-more_title {
  font-size: 25px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.5;
}

.mine-order-arrow {
  font-family: iconfont2;
  width: 25px;
  height: 30px;
  font-size: 30px;
  color: #888888;
  margin-bottom: 2px;
}

.mine-order-title-more text {
  display: block;
}

.mine-order-info {
  display: flex;
  align-items: center;
  font-size: 25px;
  flex-direction: row;
  font-weight: 400;
  flex-wrap: wrap;
  padding-top: 30px;
}
.mine-order-info-image{
  width: 60px;
  height: 64px;
  margin-bottom: 15px
}

.mine-order-icon {
  margin-bottom: 10px;
  font-family: iconfont2;
  font-size: 60px;
  /*color: #DFBB85;*/
}

.mine-order-num {
  position: absolute;
  right: 50px;
  top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}

.mine-order-unpaid {
  position: relative;
  display: flex;
  /*flex: 1;*/
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 167px;
  /*width: 220px;*/
  padding-bottom: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
  lines: 1;
}

.mine-order-notdelivere {
  position: relative;
  text-align: center;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.mine-order-delivered {
  position: relative;
  text-align: center;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mine-order-evaluate {
  position: relative;
  text-align: center;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mine-order-refund {
  position: relative;
  text-align: center;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mine-order-bottomIcon {
  font-size: 24px;
  margin-top: 10px;
}
/* 小圆点 */
.totalColor{
  background-color: #fc5157
}

.mine-order-name{
  /*font-size: 22px;*/
  font-size: 26px;
  color: #333333;
}






</style>
